﻿//$(function(){
//	alert(1);
//})

//得到焦点时
$('#wrap input').focus(function () {
	$(this).css('width' , 200);
})
//失去焦点时
$('#wrap input').blur(function () {
	$(this).css('width' , 150);
})
//小图像调用数据
$.getJSON('/pic',function(data){
//	console.log(data.tag);
	$('.tag-bg img').each(function(i){
		$('.tag-bg img').eq(i).attr('src',data.tag[i].imgurl);
	})
})
//大图片的封装以及创建
function creat(type){
	for(var i = 0; i < 40;i++){//创建li
		var li = $('<li></li>');
		$(li).css({
			position:'relative',
			
			
		});
		$(li).html('<a href="show"><img/></a><span>99.5</span><p>by&nbsp;&nbsp;&nbsp;&nbsp;摄影师谢小宝 </p>');//创建img
		$('.main ul li img').css({//设置每个img的高度
			height:278,
		});
		//添加排行
		$('.main ul li span').css({
			zIndex:5,
			width:50,
			height:50,
			textAlign:'center',
			lineHeight:'50px',
			color:'#fff',
			fontWeight:600,
			background:'rgba(0,0,0,0.2)',
			position:'absolute',
			top:'20px',
			right:'10px',
			display:'none'
		})
		//添加名字
		$('.main ul li p').css({
			lineHeight:'60px',
			width:'100%',
//			background:'rgba(0,0,0,0.2)',
			position:'absolute',
			bottom:0,
			left:0,
			paddingLeft:'20px',
			color:'#fff',
			display:'none'
		})
		//调用数据		
		$.getJSON("data/"+type,function(data,i){
			//console.log(data.lists);
			//遍历每一个img
			$('.main ul li img').each(function(i){
				//给每一个img添加路径
				$('.main ul li img').eq(i).attr('src',data[i].url);	
			})
		})
		//把每一个li添加到ul里面
		$(li).appendTo($('.main ul'));
	}
}
//自调用
creat('bigImg0');


//鼠标滑过出现排行
$('.main ul li').each(function(i){
	$('.main ul li').eq(i).on({
//		'click':function(){
//		},
		'mouseover':function(){
			$('.main ul li span').eq(i).show();
			$('.main ul li p').eq(i).show();
		},
		'mouseout':function(){
			$('.main ul li span').eq(i).hide();
			$('.main ul li p').eq(i).hide();
		}
	})
})


//鼠标滑过每一个img时,出现每一个img的排行,名字,以及其他的信息
$('.main ul li img').each(function(i){
	$('.main ul li img').eq(i).on({
		"mouseover":function(){
//			console.log(1);
		},
		"mouseout":function(){
//			console.log(2);
		}
	})
})

		
//点击tab切换
$('.tag').each(function(i){
	$('.tag').eq(i).on('click',function(){
		$(this).css({
			borderBottom:"4px solid #0099E5",
			boxSizing:"border-box"
		}).siblings().css('border','none');
//		console.log(i)
		creat('bigImg'+i);
	})
})

//点击最新菜单
$('.pic-nav .discover').each(function(i){
	$('.pic-nav .discover').eq(i).on('click',function(){
		$(this).css({
			borderBottom:"4px solid #0099E5",
			color:"#0099E5"
		}).siblings().css({
			borderBottom:"none",
		    color:"#666"
		})
		if(i==1){
			creat('bigImgNew');
		}else{
			creat('bigImg0');
		}
	})
})

//点击返回顶部
$('.back').on('click',function(){
	document.body.scrollTop = 0;
})

//导航栏悬浮
window.onscroll = function() {
	var st = document.body.scrollTop || document.documentElement.scrollTop;
//	 console.log(st);
	 if(st>=50){
	 	$('.pic-nav').css({
	 		position:'fixed',
	 		top:0,
	 		zIndex:10
	 	})
	 }else{
	 	$('.pic-nav').css({
	 		position:'fixed',
	 		top:'50px'
	 	})
	 	$('.pic-tag').css('margin-top','64px')
	 }
}

//document.write('<script src="../js/show.js"></script>')